<template>
  <div class="news">
    <ul>
      <li v-for="item in newsList" :key="item.id">
        <RouterLink to="/news/datails">{{ item.title }}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from "vue";
const newsList = reactive([
  {
    id: "2342354325",
    title: "是大法官的",
    content: "啥问题热让他给对方光度法个"
  },
  { id: "4567456757", title: "是大法官1", content: "水电费感受到森岛帆高" },
  { id: "4567568765", title: "是大法管2", content: "wert45水电费感受到个" }
]);
</script>
<style scoped >
.news ul {
  list-style: none;
  cursor: pointer;
  margin: 15px 0px;
  color: skyblue;
}
.content {
  width: 200px;
  height: 120px;
  border: 1px solid gray;
}
</style>